import { Button, Form, InputNumber, message } from 'antd';
import { useEffect, useState } from 'react';
import { getBaseSetInfo, setBaseInfo } from './data';
import OStyle from './index.less';
const SetBase: React.FC<any> = () => {
  const [isSet, setIsSet] = useState<boolean>(false);
  const [form] = Form.useForm();
  const [saveLoading, setLoading] = useState<boolean>(false);
  /**
   * 获取
   */
  const init = async () => {
    const { data } = await getBaseSetInfo();
    if (data) {
      form.setFieldsValue({ ...data });
    }
  };

  useEffect(() => {
    init();
  }, []);
  /**
   * 保存
   */
  const savefun = async () => {
    await form.validateFields();
    const params = form.getFieldsValue();
    setLoading(true);
    setBaseInfo({ ...params }).then((res) => {
      setLoading(false);
      if (res && res.code == '200') {
        message.success('保存成功');
        setIsSet(false);
        init();
      }
    });
  };

  return (
    <div className="safe_boss_page">
      <div style={{ height: '100%', width: '100%', background: '#fff', padding: '16px' }}>
        <div style={{ marginBottom: '32px' }}>
          {!isSet ? (
            <Button
              type="primary"
              onClick={() => {
                setIsSet(true);
              }}
            >
              设置
            </Button>
          ) : (
            <div className="flexr alc">
              <Button
                style={{ marginRight: '10px' }}
                onClick={() => {
                  init();
                  setIsSet(false);
                }}
              >
                取消
              </Button>

              <Button
                type="primary"
                loading={saveLoading}
                onClick={() => {
                  savefun();
                }}
              >
                保存
              </Button>
            </div>
          )}
        </div>
        <div>
          <Form form={form} className={OStyle.setBaseForm}>
            <div className={`${OStyle.setBaseitem} flexr juc`}>
              <div className={OStyle.label}>企业每日可以查看免费简历最大数量</div>
              <Form.Item name="freeResumeMaxNum" rules={[{ required: true, message: '请输入' }]}>
                <InputNumber className={OStyle.xsIpnut} min={1} precision={0} placeholder="请输入" disabled={!isSet} />
              </Form.Item>
              <div className={OStyle.unit}>份</div>
            </div>
            <div className={`${OStyle.setBaseitem} flexr juc`}>
              <div className={OStyle.label}>
                收费简历付费后可以查看简历的有效时间
                {/* <p className={OStyle.tips}>（同时也设置了虚拟号的有效期）</p> */}
              </div>
              <Form.Item name="paidResumeEffectiveTime" rules={[{ required: true, message: '请输入' }]}>
                <InputNumber className={OStyle.xsIpnut} min={1} precision={0} placeholder="请输入" disabled={!isSet} />
              </Form.Item>
              <div className={OStyle.unit}>天</div>
            </div>
          </Form>
        </div>
      </div>
    </div>
  );
};

export default SetBase;
